<template>
  <div>
    <transition name="search">
    </transition>
    <transition appear appear-active-class="fadeIn">
		<Header
      @startSearch="startSearch"
      @endSearch="endSearch"
      @changeSearchItem="changeContent"
      @showChangeUser="showChangeUser"
    ></Header>
		</transition>
    <transition name="search">
      <change-user v-show="ifChangeUser"></change-user>
    </transition>
    <transition name="fadeIn">
      <Msg :text="changeUserMsg" :msgWay="msgWay" v-if="showChangeUserStatus"></Msg>
    </transition>
    <transition appear appear-active-class="fadeIn">
    <div ref="PCIndex" class="PCindex" :style="{height:innerH+'px'}" style="maxWidth:850px">
      <div class="test">
          <router-view></router-view>
      </div>
    </div>
    
    </transition>
  </div>
</template>

<script>
// import {scroll} from "../../scroll"
import { state } from "../../store";
import Header from "./header";
import search from "../../components/search";
import Bus from "../../bus";
//改变用户信息 头像和昵称
import ChangeUser from "../../components/changeUser"
import Msg from "../../components/msg"
 
export default {
  mounted() {
    this.MsgChange()
    if(this.$route.path==='/me'){
      this.$refs.PCIndex.style.maxWidth = '100%'

    }
  },
  components: {
    Header,
    search,
    ChangeUser,
    Msg,
  },
  data() {
    return {
      // content: [], //主页内容
      // text:"你确定要删除吗？",
      ifSearch: false,
      ifChangeUser:false,
      searchContent: [], //搜索栏内容
      changeUserMsg:"上传成功",//修改用户头像或昵称
      showChangeUserStatus:false,//成功提示 Msg显示
      msgWay:"success",
    };
  },
  computed: {
    currentRouterNotIndex(){
      return this.$route.path!=="index"
    },
    innerH(){
      return document.body.clientWidth<765? window.innerHeight-50 :false
    },
    EditBlog() {
      return state.EditBlog;
    },
    Fel() {
      return document.querySelector(".PCindex");
    },
    AllCel() {
      return document.querySelectorAll(".ItemTestzz");
    },
  },
  watch:{
  $route(to,from){
    if(to.path==='/me'){
      this.$refs.PCIndex.style.maxWidth = '100%'

    }else{
      this.$refs.PCIndex.style.maxWidth = '850px'

    }
  }
},
  methods: {
    cancelEdit(){
      state.EditBlog = false
    },
    // scrollBehavior(){
    //   console.log(
    //   this.$refs.scrollY.scrollTop

    //   );
    // },
    MsgChange(){
      Bus.$on("finishChange",msg=>{
      setTimeout(()=>{
        this.showChangeUserStatus=false
      },2000)
      this.msgWay=msg      
      msg=="success" ? this.changeUserMsg="修改成功":this.changeUserMsg="修改失败"
      this.showChangeUserStatus=true
    })
    },
    showChangeUser(){
      this.ifChangeUser=!this.ifChangeUser
    },
    changeContent(content) {
      console.log(content);

      if (content == "") {
        this.searchContent = this.allContent;
      } else if (content == null) {
        this.searchContent = [{ title: "没有找到哦" }];
      } else {
        this.searchContent = content;
      }
    },
    startSearch() {
      this.ifSearch = true;
    },
    endSearch() {
      setTimeout(() => {
        this.ifSearch = false;
      }, 300);
    },
    // search(content) {
    //   console.log(content)
    //   if (content == "") {
    //     this.content = this.allContent;
    //   } else {
    //     this.content = content;
    //   }
    // },
  },
  beforeDestroy() {
    Bus.$off("finishChange")
  },
};
</script>

<style lang="less" scoped>
@import url("../../css/pc/index.less");
@import url("../../css/mobile/mvindex.less");
@import url("../../css/comment/animate.css");
.write {
  position: absolute;
  width: 100%;
  left: 0;
  top: 40px;
  z-index: 999;
}

.search-enter,
.search-leave-to {
  opacity: 0;
  transform: translateY(-300px);
}
.search-enter-active,
.search-leave-active {
  transition: all 0.5s;
}



</style>